<template>
	<view class="bg-F5F5F5">
		<view style="margin-bottom: 22rpx;">
			<u-tabs-swiper inactive-color="#111111" font-size="26" active-color="#DFB982" ref="uTabs" :list="list"
				:current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!-- :style="{   height: windowHeight + 'px' }"	@animationfinish="animationfinish" -->
		<swiper :style="{   height: windowHeight-40 + 'px' }" @animationfinish="animationfinish"
			:current="swiperCurrent">
			<!-- 总订单 -->
			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom">
					<view class="px-28 pb-40 bg-FFFFFF mb-10" style="padding-top: 30rpx;"
						@click.self="daihexiao(item.order_id)" v-for="(item,index) in dataList" :key="">
						<x-did-title :name="`订单编号:${item.order_sn}`">
							<view class="flex aj-center" style="height: 45rpx;">
								<view class="fw-400 f-24 c-77 " style="margin-right: 22rpx;">
									<!-- 已核销 -->
									{{item.status | handle}}
								</view>
								<view class=""
									style="width: 10rpx;height: 18rpx;    line-height: 19rpx; vertical-align: middle;">
									<image src="../static/doct/you1.png" style="vertical-align: middle;" mode="">
									</image>
								</view>
							</view>

						</x-did-title>
						<!-- <x-StayToThe @click.native="details(0)" /> -->
						<view class="flex just-between  pb-30 mb-20 border-b-DDDDDD" style="width: 100%;">
							<view class="flex" style="width: 520rpx;overflow-x: scroll;">
								<view class="mr-20" style="width: 120rpx;height: 120rpx;"
									v-for="(item2,index2) in item.goods_image" :key="index2">

									<!-- <image style="width: 120rpx;height: 120rpx;" src="../../static/doct/doct.png" mode=""></image> -->
									<image :src="item2" mode=""></image>
								</view>
							</view>
							<view class="ml-28 aj-center">
								共{{item.goods_num}}件
							</view>
						</view>
						<view class="just-between">
							<view class="fw-400 c-77 f-26">
								{{item.createtime}}
							</view>
							<view class="flex aj-center">
								<text>合计</text>
								<text class="c-11 f-bold f-36">￥{{item.total_amount}}</text>
							</view>
						</view>

					</view>
					<view class="aj-center" v-if="dataList.length==0">
						暂无更多
					</view>

					<view class="aj-center">
						<u-loading mode="circle" style="padding-top: 10rpx;padding-bottom: 10rpx;" v-show="load">wefwe
						</u-loading>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 待核销 -->

			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom">

					<view class="px-28 pb-40 bg-FFFFFF mb-10" style="padding-top: 30rpx;"
						@click.self="daihexiao(item.order_id)" v-for="(item,index) in dataList" :key="">
						<x-did-title :name="`订单编号:${item.order_sn}`">
							<view class="flex aj-center" style="height: 45rpx;">
								<view class="fw-400 f-24 c-77 " style="margin-right: 22rpx;">
									<!-- 已核销 -->
									{{item.status | handle}}
								</view>
								<view class=""
									style="width: 10rpx;height: 18rpx;    line-height: 19rpx; vertical-align: middle;">
									<image src="../static/doct/you1.png" style="vertical-align: middle;" mode="">
									</image>
								</view>
							</view>

						</x-did-title>
						<!-- <x-StayToThe @click.native="details(0)" /> -->
						<view class="flex just-between  pb-30 mb-20 border-b-DDDDDD" style="width: 100%;">
							<view class="flex" style="width: 520rpx;overflow-x: scroll;">
								<view class="mr-20" style="width: 120rpx;height: 120rpx;"
									v-for="(item2,index2) in item.goods_image" :key="index2">

									<!-- <image style="width: 120rpx;height: 120rpx;" src="../../static/doct/doct.png" mode=""></image> -->
									<image :src="item2" mode=""></image>
								</view>
							</view>
							<view class="ml-28 aj-center">
								共{{item.goods_num}}件
							</view>
						</view>
						<view class="just-between">
							<view class="fw-400 c-77 f-26">
								{{item.createtime}}
							</view>
							<view class="flex aj-center">
								<text>合计</text>
								<text class="c-11 f-bold f-36">￥{{item.total_amount}}</text>
							</view>
						</view>
					</view>

					<view class="aj-center" v-if="dataList.length==0">
						暂无更多
					</view>
					<view class="aj-center">
						<u-loading mode="circle" style="padding-top: 10rpx;padding-bottom: 10rpx;" v-show="load">wefwe
						</u-loading>
					</view>
				</scroll-view>
			</swiper-item>


			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom">

					<view class="px-28 pb-40 bg-FFFFFF mb-10" style="padding-top: 30rpx;"
						@click.self="daihexiao(item.order_id)" v-for="(item,index) in dataList" :key="">
						<x-did-title :name="`订单编号:${item.order_sn}`">
							<view class="flex aj-center" style="height: 45rpx;">
								<view class="fw-400 f-24 c-77 " style="margin-right: 22rpx;">
									<!-- 已核销 -->
									{{item.status | handle}}
								</view>
								<view class=""
									style="width: 10rpx;height: 18rpx;    line-height: 19rpx; vertical-align: middle;">
									<image src="../static/doct/you1.png" style="vertical-align: middle;" mode="">
									</image>
								</view>
							</view>

						</x-did-title>
						<!-- <x-StayToThe @click.native="details(0)" /> -->
						<view class="flex just-between  pb-30 mb-20 border-b-DDDDDD" style="width: 100%;">
							<view class="flex" style="width: 520rpx;overflow-x: scroll;">
								<view class="mr-20" style="width: 120rpx;height: 120rpx;"
									v-for="(item2,index2) in item.goods_image" :key="index2">

									<!-- <image style="width: 120rpx;height: 120rpx;" src="../../static/doct/doct.png" mode=""></image> -->
									<image :src="item2" mode=""></image>
								</view>
							</view>
							<view class="ml-28 aj-center">
								共{{item.goods_num}}件
							</view>
						</view>
						<view class="just-between">
							<view class="fw-400 c-77 f-26">
								{{item.createtime}}
							</view>
							<view class="flex aj-center">
								<text>合计</text>
								<text class="c-11 f-bold f-36">￥{{item.total_amount}}</text>
							</view>
						</view>
					</view>
					<view class="aj-center" v-if="dataList.length==0">
						暂无更多
					</view>
					<view class="aj-center">
						<u-loading mode="circle" style="padding-top: 10rpx;padding-bottom: 10rpx;" v-show="load">
						</u-loading>
					</view>
				</scroll-view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	// var payType = [{
	// 		type: "3",
	// 		name: "待核销"
	// 	},
	// 	{
	// 		type: "4",
	// 		name: "已核销"
	// 	}
	// ];
	var payType = [{
			type: "1",
			name: "待核销"
		},
		{
			type: "2",
			name: "已核销"
		}
	];
	export default {

		data() {
			return {
				size: 10, //10条
				page: 1, //1页
				windowHeight: 674,
				status: "1", //默认全部订单获取数据
				total: 0, //默认当前切换(待核销 全部 已核销)的订单的数量
				list: [{
					name: '全部订单'
				}, {
					name: '待核销订单'
				}, {
					name: '已核销订单'
				}],
				// 订单的数据:  待核销 已核销  全部
				dataList: [],
				tabs: ['10', '20', '30'],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				load: false,
			}
		},
		filters: {
			handle(id) {
				console.log(id, 'idfilters')
				let paytype = payType.find(item => {
					return item.type == id;
				})

				console.log(paytype, 'paytype')
				return paytype ? paytype.name : null
			},

		},
		onShow() {
			const info = uni.getSystemInfoSync();
			console.log(info);
			this.windowHeight = info.windowHeight;
			// 订单列表
			this.dingdanAll();
		},
		methods: {
			dingdanAll() {
				this.$https('doctindex.writeOff', {
					page: this.page,
					size: this.size,
					status: this.status
				}).then(res => {
					console.log(res, 'res')
					this.dataList = res.data.list;
					this.total = res.data.total;
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {

				switch (index) {
					case 0:
						this.status = 1;
						break;
					case 1:
						this.status = 2;
						break;
					case 2:
						this.status = 3;
						break;
					default:
						break;
				}
				console.log('切换')
				// this.dataList = []; //切换的时候清空数据
				this.swiperCurrent = index;
				this.current = index;
				this.load = false;
				// this.dingdanAll();
			},

			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				this.page = 1;
				this.size = 10;
				console.log('华东')
				this.dataList = []; //切换的时候清空数据
				this.dingdanAll();
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
				this.load = false;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(' 加载 ')
				if (this.total != this.dataList.length) {
					this.page++;
					this.load = true; 
					this.$https('doctindex.writeOff', {
						page: this.page,
						size: this.size,
						status: this.status
					}).then(res => { 
						this.load = false; 
						this.dataList.push(...res.data.list);
						this.total = res.data.total;
					}) 
				} else {
					console.log('无法加载暂无那么多数据')
				}
			},
			// details(id) {
			// 	uni.navigateTo({
			// 		url: '/goodsPage/shoopDetails/shoopDetails?id=' + id
			// 	})
			// },
			daihexiao(id) {
				console.log(id)
				uni.navigateTo({
					url: '/goodsPage/IndentDoctDetail/IndentDoctDetail?id=' + id
				})
			}
		}
	}
</script>

<style scoped>
	@import url("@/common/css/fress.css");
	@import url("@/common/css/mycss.css");

	.h {
		/* height: calc(); */
	}
</style>
